<template>
  <view>
    <view class="box">
     
      <view class="pl30 pr30">
        
        <view class="mt30 r_area_block_1">
          <view class="pt30 pb20 fs24 lh34 cor_666 r_bb2">收货信息</view>
          <view class="fs36 lh50 fwb">
            <view class="mt35"><text class="">{{dataOrder.address.person}}</text><text class="ml30">{{dataOrder.address.mobile}}</text></view>
            <view class="mt25">{{dataOrder.address.address}}</view>
          </view>
          <view class="pl10 pr10 pb30">
            <view class="mt30 df jcsb tac">
              <view class="re" @click="copy(
							`负责人：${dataOrder.address.person} TEL:${dataOrder.address.mobile}
${dataOrder.address.address}`)">
                <image src="@/static/icon_b_01.png" class="img_6 vt"></image>
                <view class="mt15 fs24 lh44">复制地址</view>
              </view>
              <view class="re"  @click="call(dataOrder.address.mobile)">
                <button open-type="contact" class="button_pos"></button>
                <image src="@/static/icon_b_02.png" class="img_6 vt"></image>
                <view class="mt15 fs24 lh44">拨打电话</view>
              </view>
              <view class="re" @click="lookMap(dataOrder.address.lat - 0,
								dataOrder.address.lng - 0,
								dataOrder.address.store_title,
								dataOrder.address.address
							)">
                <image src="@/static/icon_b_03.png" class="img_6 vt"></image>
                <view class="mt15 fs24 lh44">导航到店</view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="mt30 r_area_block_1">
          <view class="pt30 pb20 fs24 lh34 cor_666 r_bb2">预计收益</view>
          <view class="r_bb2 flex_box aic">
            <view class="fs30">下单数量</view>
            <view class="item ov"><input  :disabled="createType == 1" v-model="form.expect_num" type="text" class="ipt_01" placeholder-style="color: #BBBBBB;" placeholder="请输入" /></view>
          </view>
          <view class="r_bb2 flex_box aic">
            <view class="fs30">预估金额</view>
            <view class="item ov"><input  :disabled="createType == 1"
			 @blur="inputEnv"
			 v-model="form.expect_price" type="text" class="ipt_01" placeholder-style="color: #BBBBBB;" placeholder="请输入" /></view>
		  </view>
		  <view class="r_bb2 flex_box aic" v-if="couponList.coupon_id">
			   <view class="fs30 cor_EDB " >预计加价券</view>
			   <view class="item ov text-price" >
			   	<view style="height: 60rpx;line-height: 60rpx;text-align: right;">+￥{{couponList.condition_money}}</view>
			   </view>	 
		  </view>
		  <view class="flex_box aic" v-if="dataOrder.qc_price.type != 0">
		    <view class="fs30 cor_EDB " >质检服务费</view>
		 <!--   <view class="item ov cor_EDB" v-if="dataOrder.qc_price.is_switch == 0" style="">
				<view v-if="dataOrder.qc_price.type == 1" style="height: 60rpx;line-height: 60rpx;text-align: right;">{{dataOrder.qc_price.value}}%</view>
				<view v-if="dataOrder.qc_price.type == 2" style="height: 60rpx;line-height: 60rpx;text-align: right;">{{dataOrder.qc_price.value}}</view>
			</view>	   -->
			<view class="item ov cor_EDB" v-if="dataOrder.qc_price.is_switch == 1" >
				<view v-if="dataOrder.qc_price.type == 1" style="height: 60rpx;line-height: 60rpx;text-align: right;">{{dataOrder.qc_price.value}}%</view>
				<view v-if="dataOrder.qc_price.type == 2" style="height: 60rpx;line-height: 60rpx;text-align: right;">{{dataOrder.qc_price.value}}</view>
			</view>	
		  </view>
        </view>
        
        <view class="mt20 pb5 pl30 pr30 fs26 lh38 cor_666">最终成交价以质检金额为准</view>
        
        <view class="mt30 r_area_block_1">
          <view class="pt30 pb20 fs24 lh34 cor_666 r_bb2">快递信息</view>
          <view class="flex_box aic">
            <view class="fs30">物流发货</view>
            <view class="item ov"><input v-model="form.express_number" type="text" class="ipt_01" placeholder-style="color: #BBBBBB;" placeholder="请输入快递单号" /></view>
            <image src="@/static/icon_saomiao.png" class="ml35 vt" style="width: 36rpx; height: 33rpx;"></image>
          </view>
        </view>
        
		<view class="mt30 r_area_block_1">
			<view class="pt30 pb20 fs24 lh34 cor_666 r_bb2">发货备注</view>
			<view class="textarea-bz">
				<textarea :maxlength="-1"	 row="5"	 v-model="form.remarks" placeholder="请输入内容" count></textarea>
			</view>
			<upload-image v-model="form.remarks_images" mutiple :maxUpload="9" showProgress></upload-image>
		</view>
		
		<view style="margin-top: 40rpx;" >
			<view class="fs30 fsb" style="line-height: 1;">补充说明</view>
			<view ><text style="font-size: 26rpx;line-height: 2;">{{dataOrder.tip}}</text></view>
		</view>
		
      </view>
	  <view style="height: 50rpx;"></view>
		
	  
      <view class="fix_btn_bottom" @click="createOrderEnv"><view class="button_sty">立即下单</view></view>
    </view><!-- box -->
  </view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	import {getorderInfo,createOrder} from "@/api/order"
	import {orderCoupon} from "@/api/coupon"
	import { hsdGet, hsdDelAll,hsdDel,getNumPirce } from "@/utils/hsd.ts";
	import {showImage,call,copy,lookMap} from "@/utils/tools.ts"
	
	const form = reactive({
		expect_num:'',
		expect_price:'',
		address_id:1,
		remarks:'',
		remarks_images:[],
		express_number:'',
		products:[],
		coupon_id:0,
	})
	
	const createType = ref(2) // 1 发货单下单  2快速下单
	
	const dataOrder = reactive({
		address:{
			person:'',
			mobile:'',
			address:'',
			lat:0,
			lng:0,
		},
		qc_price:{
			type:1,
			value:0,
		},
		tip:'',
	})
	
	// const inputPrice()
	
	const couponList = reactive({
		coupon_id:0,
		condition_money:0
	})
	
	
	const createOrderEnv = async () => {
		uni.showLoading({
		    title: '请稍后...'
		})
		await createOrder(form);
		uni.$u.toast('下单成功')
		if(createType.value == 1){
			hsdDelAll();
		}
		uni.reLaunch({
			url:'/pages/orderlist/orderlist'
		})
		uni.hideLoading()
	}
		
	const getData = async () =>{
		let data = await getorderInfo({});
		dataOrder.address = data.address;
		dataOrder.qc_price = data.qc_price;
		dataOrder.tip = data.tip;
	}
	const getCoupon = async (money:any) => {
	 let data = await orderCoupon({money:money});
	  if(data.can_use[0]){
		  form.coupon_id = data.can_use[0].id;
		 couponList.coupon_id = data.can_use[0].id;
		 couponList.condition_money = data.can_use[0].money; 
	  }else{
		couponList.coupon_id = 0;
		form.coupon_id = 0;
		couponList.condition_money = 0;
	  }
	}
	
	const inputEnv = async (e:any) => {
		getCoupon(e.detail.value)
	}
	
	onLoad((opt:any) => {
		if(opt.type == 1){
			createType.value = 1;
			getNumPirce();
			let _data =getNumPirce();
			form.expect_price = _data.price;
			getCoupon(_data.price)
			form.expect_num = _data.num;
			form.products = hsdGet();
		}
		getData();				
	})
</script>

<style lang="scss">
	
	.textarea-bz{
		
		border: 1px solid #e6e6e6;
		margin: 15rpx 0;
	
		padding: 10rpx;
		.textarea{
			height: 100rpx;
		}
	}
  
  page { background: #F4F6F8;padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); }
  
  .r_area_block_1 {
    position: relative;
    padding: 0 30rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
  }
  
  .ipt_01 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: right;
    font-size: 30rpx;
    color: #333;
    background: transparent;
    border: 0;
    outline: none;
  }
  
  .fix_btn_bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    z-index: 5;
  }
  
  .fix_btn_bottom .button_sty {
    display: block;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,73,7,.6) 0%, rgba(255,73,7,1) 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
  }
  
  .button_pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
  }

</style>
